import React, { useState } from 'react';
import './Whole.scss';
import Intelligentdesign from '../Intelligentdesign/Intelligentdesign';
import Poster from '../Poster/Poster';
import Officialaccount from '../Officialaccount/Officialaccount';
import Collectingscenes1 from '../../../assets/images/Collectingscenes/1.webp';

const Whole = () => {
  const [offset, setOffset] = useState(0);

  const handleNext = () => {
    if (offset > -1100) {
      setOffset(offset - 1100);
    }
  };

  const handlePrev = () => {
    if (offset < 0) {
      setOffset(offset + 1100);
    }
  };

  const renderScenes = Array(12).fill(null).map((_, index) => (
    <li key={index}>
      <img src={Collectingscenes1} alt="" />
      <div className='Solartermelements'>
        <h4>公众号首图</h4>
        <p>900px x 383px</p>
      </div>
      <div className='overlay'>
        <img src="https://beta.chuangkit.com/distsaas/img/favorite-active.680145be.svg" alt="" className='img'/>
        <img src="https://pub-cdn-oss.chuangkit.com/designKind/502?v=1726647366269&imageMogr2%2Fformat%2Fwebp" alt="" className='img1'/>
        <img src="https://beta.chuangkit.com/distsaas/img/search-template-icon.d572a3bc.svg" alt="" className='img2'/>
        <div className='overlayleft'></div>
        <div className='overlayright'></div>
        <div className='overlayright1'></div>
      </div>
    </li>
  ));

  return (
    <div className='Whole'>
      <div className='Collectingscenes'>
        <h2>收藏场景</h2>
        <div
          className={`arrow left ${offset === 0 ? 'hidden' : ''}`}
          onClick={handlePrev}
        >
          &lt;
        </div>
        <div
          className={`arrow right ${offset <= -1100 ? 'hidden' : ''}`}
          onClick={handleNext}
        >
          &gt;
        </div>
        <ul className='Summerul' style={{ transform: `translateX(${offset}px)` }}>
          {renderScenes}
        </ul>
      </div>

      <div className="Intelligentdesign">
        <Intelligentdesign />
      </div>
      <div className="Poster">
        <Poster />
      </div>
      <div className="Officialaccount">
        <Officialaccount />
      </div>
    </div>
  );
};

export default Whole;